<template>
  <!--专辑列表页面-->
  <div class="type10">
    <ul>
      <li class="remarks evenBackground">
        <div class="flex2">
          <p>专辑</p>
        </div>
        <div>
          <p>作者</p>
        </div>
        <div class="cen">
          <p>歌曲数</p>
        </div>
      </li>
      <li v-for="(val,index) in infoSongs" :key="index" :class="index%2==1?'evenBackground':''">
        <album :infoList="val" />
      </li>
    </ul>
  </div>
</template>

<script>
import require from "requests/grabble";
import album from "components/business/album";
export default {
  name: "GrabbleType10",
  data() {
    return {
      keyWord: this.$route.query.keyWord,
      infoSongs: null
    };
  },
  components: {
    album
  },
  watch: {
    $route: "newpage"
  },
  methods: {
    getSongs(value) {
      require.googleAlbum(value).then(res => {
        this.infoSongs = res.data.result.albums;
        console.log(this.infoSongs);
      });
    },
    newpage() {
      this.keyWord = this.$route.query.keyWord;
      this.getSongs(this.keyWord);
    }
  },
  mounted() {
    this.getSongs(this.keyWord);
    console.log(this.keyWord);
  }
};
</script>

<style scoped lang='less'>
.type10 {
  ul {
    li {
      padding: 10px 0;
    }
    li.remarks {
      display: flex;
      div {
        flex: 1;
        color: #999;
      }
      .flex2 {
        flex: 2;
      }
      .cen {
        p {
          text-align: center;
        }
      }
    }
  }
}
.evenBackground {
  background-color: rgba(0, 0, 0, 0.01);
}
</style>